<template>
  <a-form :form="form" layout="inline">
    <div>
      <rx-grid ref="table"
               :dataSource="headerFields"
               :allowRowSelect="false"
               :multiSelect="true"
               :showPage="false"
               :columns="headerColumns"
               :heightauto="true"
      >
          <span slot="filterEdit">
              <a-checkbox :checked="editShow" @change="filterEdit('edit')">可见</a-checkbox>
          </span>
        <span slot="name" slot-scope="{text,record,index,blur}">
          {{text}}
        </span>
        <span slot="alias" slot-scope="{text,record,index,blur}">
            {{text}}
        </span>
          <span slot="edit" slot-scope="{text,record,index}">
               <a-checkbox :checked="filterPermissionEdit(record.edit,'edit')" @click.stop="compile(record,index,'edit')"></a-checkbox>
               <my-icon v-if="!filterPermissionEdit(record.edit,'edit')" @click="editRecord(record,index,'edit')" style="margin-left: 5px" type="iconsetup"></my-icon>
               <a-tag v-if="record.edit !='none' && record.edit !='everyone'" style="margin-left: 10px" color="green">
                   {{i18n('list.alreadySet','已设置')}}
               </a-tag>
          </span>
      </rx-grid>
    </div>

  </a-form>
</template>
<script>
  import {BaseForm, RxLayout, RxGrid, RxCodemirror} from "@lowcode/jpaas-common-lib";

  import DialogBox from "@/assets/js/DialogBox";


  export default {
    name: 'FormPermissionUserTabBtn',
    mixins: [BaseForm],
    props: {
      mainData: {
        type: Array,
        default: []
      }
    },
    components: {
      RxLayout,
      RxGrid,
      RxCodemirror,
    },
    data() {
      return {
        editIndex:0,
        selectAllType: "",
        selectOneType:"",
        changeValue: {},
        activeKey: "columnConf",
        isAllowDataGrant: false,
        isLeftTree: 'NO',
        expandedRowKeys: [],
        fieldDatas: [],
        headerFields: [],
        headerColumns: [
          {title: this.i18n('form.name','字段名称'), dataIndex: 'name',width:'30%', allowCellEdit: true, scopedSlots: {customRender: 'name'}},
          {title: this.i18n('form.key','字段Key'),width:'30%',  dataIndex: 'alias', allowCellEdit: true, scopedSlots: {customRender: 'alias'}},
          {
            title: '可见',
            dataIndex: 'edit',
            allowCellEdit: false,
            slots: { title: 'filterEdit'},
            scopedSlots: {customRender: 'edit'}
          }],
          editShow:true,
      }
    },
    created() {

      this.headerFields = this.mainData;
    },
    methods: {
        i18n(name,text,key){
            return this.$ti18(name,text,"formPermiss",key);
        },
        //  全选编辑
        filterEdit(name){
            var show = false;
            this.editShow = !this.editShow;
            //全部有权限
            var permission ={};
            if(this.editShow){
                permission[name]= 'everyone';
                permission[name+'_name']= this.i18n('list.everyone','所有人');
            }else {
                permission[name]= 'none';
                permission[name+'_name']= this.i18n('list.none','无权限');
            }
            this.headerFields = this.headerFields.map(res=>{
                res[name] = permission[name];
                res[name+'_name'] = permission[name+'_name'];
                return res
            })
            this.$refs.table.loadData();
        },
        filterPermissionEdit(value,name){
            if(value=='everyone'){
                return true
            }else {
                if(name =='edit'){
                    this.editShow = false;
                }
                return false
            }
        },
        compile(record,index,type){
            if(record[type] =='everyone'){
                record[type]='none';
                record[type+'_name']=this.i18n('list.none','无权限')
            }else {
                record[type]='everyone';
                record[type+'_name']=this.i18n('list.everyone','所有人')
            }
            var show = true;
            this.headerFields.map(res=>{
                if(res[type]=='none'){
                    show = false
                }
            })
            this[type+'Show'] = show;
        },
      editRecord(record,index,type){
        var self_=this;
        this.selectOneType=type;
        this.editIndex=index;
          let title = '['+record.name+']'+'字段'+'[可见]';
        DialogBox.openPermissionUser(this,record[type],function(self_,data){
          var datas = self_.$refs.table.getData();
          var row =datas[self_.editIndex];
          self_.setChangeValues(data,row,self_.selectOneType);
        },'',title);
      },
      setAttrsValue(type) {
        this.selectAllType = type;
        var selectDatas = this.$refs.table.getSelectedRows();
        if (!selectDatas || selectDatas.length == 0) {
          this.$message.info(this.i18n('msg.setAttrMsg','请先选择需要设置的列数据，再进行操作！'));
          return;
        }
        var self_ = this;
        DialogBox.openPermissionUser(this,selectDatas[0][type], function (self_, data) {
          var selectDatas = self_.$refs.table.getSelectedRows();
          for (var i = 0; i < selectDatas.length; i++) {
            var row = selectDatas[i];
            self_.setChangeValues(data, row,self_.selectAllType);
          }
        });
      },
      setChangeValues(data, row,type) {
        var typeName = type + "_name";
        var rowData = {};
        rowData[type] = data.value;
        rowData[typeName] = data.label;
        this.$refs.table.updateRow(row, rowData);
      },
      getMainData(){
        var returnObj ={};
        var dataList =this.$refs.table.getData();
        if(!dataList || dataList.length==0){
          return returnObj;
        }
        for(var i=0;i<dataList.length;i++){
          var dataObj =dataList[i];
          returnObj[dataObj.alias]=dataObj;
        }
        return returnObj;
      }
    },
      watch:{
          "mainData":function (val,oldVal){
              this.headerFields = this.mainData;
          }
      }
  }
</script>

<style scoped>
  .ant-btn-primary{
    margin-top: 0px;
    margin-right: 10px;
    margin-left: 0;
  }
  .btn-inline-box{
    margin: 10px 20px 6px 20px;
  }
</style>